html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{display:block}
audio, canvas, progress, video{display:inline-block;vertical-align:baseline;}
audio:not([controls]){display:none;height:0}
[hidden], template{display:none}
a{background:transparent}
a:active, a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b, strong{font-weight:bold}
dfn{font-style:italic}
h1{font-size:2em;}
mark{background:#ff0;color:#000}
small{ font-size:80%}
sub, sup{ font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{ bottom:-0.25em}
img{ border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code, kbd, pre, samp{font-family:monospace,monospace;font-size:1em}
button, input, optgroup, select, textarea{ color:inherit;font:inherit;margin:0;}
button{ overflow:visible}
button, select{text-transform:none}
button, html input[type="button"], input[type="reset"], input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled], html input[disabled]{cursor:default}
button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0}
input{ line-height:normal}input[type="checkbox"], input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{ height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0;}
textarea{overflow:auto;resize: none;}
optgroup{ font-weight:bold}
table{border-collapse:collapse;  border-spacing:0}
td, th{padding:0}
*{margin: 0;padding: 0;}
*, *:before, *:after{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html,body{width: 100%;height: 100%;min-width:320px;overflow: hidden;}
html{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-font-smoothing: antialiased;}
body{font-family: "微软雅黑", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.428571429;color: #333;background-color: #fff;-webkit-user-select:none;user-select:none;}
img{vertical-align: middle;}
a{text-decoration: none;color: #007aff;}
input,textarea{outline: none;}
li{list-style:none;}

/* function */
.f-cb:after,.f-cbli li:after,.clearfix:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li,.clearfix{zoom:1;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-toe{overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}

/* 模块 */
.app-view{position: relative;width: 100%;height: 100%;background-color:#efeff4;overflow:hidden;}
.app-page{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.app-head,
.app-foot{position: absolute;left: 0;z-index:10;width: 100%;background-color: #f7f7f8;}
.app-head .inner,
.app-foot .inner{padding: 0 8px;height: 44px;line-height: 44px;font-size: 14px;}
.app-head{top: 0;border-bottom: 1px solid #c4c4c4;}
.app-head .title{margin:0 50px;text-align: center;font-size:14px;font-weight:400;overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;}
.app-head .link{position: absolute;top: 0;z-index: 1;display: inline-block;width: 44px;height: 44px;text-decoration: none;outline: none;}
.app-head .app-back{left: 0;width:auto;padding: 0 8px;line-height: 42px;}
.app-head .app-back span{margin-left: 3px;}
.app-foot{bottom: 0;border-top: 1px solid #c4c4c4;}
.app-wrap{position: absolute;top: 0;bottom:0;left: 0;z-index:9;width: 100%;background-color: #efeff4;overflow-x: hidden;-webkit-overflow-scrolling:touch;}
.app-wrap .inner{position: relative;width: 100%;min-height: 100%;}
.app-head + .app-wrap,
.app-head + .app-foot + .app-wrap{top:45px;}
.app-foot + .app-wrap{bottom: 45px;}

.app-page.left{}
.app-page.left .app-head,
.app-page.left .app-foot{opacity: 0}
.app-page.left .app-wrap{-webkit-transform: translate3d(-20%, 0, 0);transform: translate3d(-20%, 0, 0);}

.app-page.center{}
.app-page.center .app-head,
.app-page.center .app-foot{opacity: 1}
.app-page.center .app-wrap{-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

.app-page.right{}
.app-page.right .app-head,
.app-page.right .app-foot{opacity: 0}
.app-page.right .app-wrap{-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}

.app-page[class*='fx-'],
.app-page[class*='fx-'] .app-head,
.app-page[class*='fx-'] .app-head .sliding,
.app-page[class*='fx-'] .app-wrap,
.app-page[class*='fx-'] .app-foot{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

.app-page.fx-rightToCenter{}
.app-page.fx-rightToCenter .app-wrap {
    -webkit-animation: pageRightToCenter .4s ease forwards;
    animation: pageRightToCenter .4s ease forwards;
}
.app-page.fx-rightToCenter .app-head .sliding{
    -webkit-animation: slidingLeftIn .4s ease forwards;
    animation: slidingLeftIn .4s ease forwards;
}

.app-page.fx-centerToLeft{}
.app-page.fx-centerToLeft .app-wrap {
    -webkit-animation: pageCenterToLeft .4s ease forwards;
    animation: pageCenterToLeft .4s ease forwards;
}
.app-page.fx-centerToLeft .app-head .sliding{
    -webkit-animation: slidingLeftOut .4s ease forwards;
    animation: slidingLeftOut .4s ease forwards;
}

.app-page.fx-leftToCenter{}
.app-page.fx-leftToCenter .app-wrap {
    -webkit-animation: pageLeftToCenter .4s ease forwards;
    animation: pageLeftToCenter .4s ease forwards;
}
.app-page.fx-leftToCenter .app-head .sliding{
     -webkit-animation: slidingRightIn .4s ease forwards;
     animation: slidingRightIn .4s ease forwards;
 }

.app-page.fx-centerToRight {}
.app-page.fx-centerToRight .app-wrap {
    -webkit-animation: pageCenterToRight .4s ease forwards;
    animation: pageCenterToRight .4s ease forwards;
}
.app-page.fx-centerToRight .app-head .sliding{
     -webkit-animation: slidingRightOut .4s ease forwards;
     animation: slidingRightOut .4s ease forwards;
 }

.app-page.fx-rightToCenter .app-head,
.app-page.fx-rightToCenter .app-foot,
.app-page.fx-leftToCenter .app-head,
.app-page.fx-leftToCenter .app-foot {
    -webkit-animation: fadeIn .4s ease forwards;
    animation: fadeIn .4s ease forwards;
}

.app-page.fx-centerToLeft .app-head,
.app-page.fx-centerToLeft .app-foot,
.app-page.fx-centerToRight .app-head,
.app-page.fx-centerToRight .app-foot {
    -webkit-animation: fadeOut .4s ease forwards;
    animation: fadeOut .4s ease forwards;
}

.app-page.fx-headIn .app-head .sliding,
.app-page.fx-headOut .app-head .sliding {
    -webkit-animation: inherit;
    animation: inherit;
}

.app-page.fx-refresh .app-wrap{
    -webkit-animation: fadeIn .4s ease forwards;
    animation: fadeIn .4s ease forwards
}

.app-page.fx-headIn .app-head {
    -webkit-animation: headTranslateIn .4s ease forwards;
    animation: headTranslateIn .4s ease forwards;
}
.app-page.fx-headOut .app-head {
    -webkit-animation: headTranslateOut .4s ease forwards;
    animation: headTranslateOut .4s ease forwards;
}
.app-page.fx-footIn .app-foot{
    -webkit-animation: footTranslateIn .4s ease forwards;
    animation: footTranslateIn .4s ease forwards;
}
.app-page.fx-footOut .app-foot{
    -webkit-animation: footTranslateOut .4s ease forwards;
    animation: footTranslateOut .4s ease forwards;
}

.app-dialog-overlay{position: absolute;top: 0;left: 0;z-index: 1000;width: 100%;height: 100%;background: rgba(0,0,0,.4);visibility: hidden;opacity: 0;
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
}
.app-dialog-overlay.s-lucency{background: rgba(0,0,0,.0);}
.app-dialog-overlay.fx-overlayIn{visibility:visible;opacity: 1;}
.app-dialog-overlay.fx-overlayOut{visibility: hidden;opacity: 0;}

.app-dialog{position: absolute;top:50%;left: 50%;z-index: 1100;margin:auto;overflow: hidden;opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1.15);
    transform: translate3d(-50%, -50%, 0) scale(1.15);
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}
.app-dialog.fx-dialogIn {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
    transform: translate3d(-50%, -50%, 0) scale(1);
    position: absolute;
}
.app-dialog.fx-dialogOut {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -50%, 0) scale(0.85);
    transform: translate3d(-50%, -50%, 0) scale(0.85);
}

.app-dialog .loading{width: 50px;height: 50px;padding:8px;background-color: rgba(0,0,0,.8);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.app-dialog .loading .loader{position:relative;display: block;width: 34px;height: 34px;
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-animation: spin 1s step-end infinite;
    animation: spin 1s step-end infinite;
}
.app-dialog .loading .loader:after{display: block;width: 100%;height: 100%;content: '';
    background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><defs><line id='l' x1='60' x2='60' y1='7' y2='27' stroke='%23fff' stroke-width='11' stroke-linecap='round'/></defs><g><use xlink:href='%23l' opacity='.27'/><use xlink:href='%23l' opacity='.27' transform='rotate(30 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(60 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(90 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(120 60,60)'/><use xlink:href='%23l' opacity='.27' transform='rotate(150 60,60)'/><use xlink:href='%23l' opacity='.37' transform='rotate(180 60,60)'/><use xlink:href='%23l' opacity='.46' transform='rotate(210 60,60)'/><use xlink:href='%23l' opacity='.56' transform='rotate(240 60,60)'/><use xlink:href='%23l' opacity='.66' transform='rotate(270 60,60)'/><use xlink:href='%23l' opacity='.75' transform='rotate(300 60,60)'/><use xlink:href='%23l' opacity='.85' transform='rotate(330 60,60)'/></g></svg>");
    background-position: 50%;
    background-size: 100%;
    background-repeat: no-repeat;
}

/*动画*/
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes pageRightToCenter {
    0% {
        -webkit-box-shadow: none;
        -webkit-transform: translate3d(100%, 0, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes pageRightToCenter {
    0% {
        box-shadow: none;
        transform: translate3d(100%, 0, 0);
    }
    100% {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes pageCenterToLeft {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0.9;
        -webkit-transform: translate3d(-20%, 0, 0);
    }
}
@keyframes pageCenterToLeft {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0.9;
        transform: translate3d(-20%, 0, 0);
    }
}

@-webkit-keyframes pageLeftToCenter {
    0% {
        opacity: 0.9;
        -webkit-transform: translate3d(-20%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes pageLeftToCenter {
    0% {
        opacity: 0.9;
        transform: translate3d(-20%, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes pageCenterToRight {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-box-shadow: none;
        -webkit-transform: translate3d(100%, 0, 0);
    }
}
@keyframes pageCenterToRight {
    0% {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
        transform: translate3d(0, 0, 0);
    }
    100% {
        box-shadow: none;
        transform: translate3d(100%, 0, 0);
    }
}

@-webkit-keyframes headTranslateIn {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes headTranslateIn {
    0% {
        transform: translate3d(0, -100%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes headTranslateOut {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -100%, 0);
    }
}
@keyframes headTranslateOut {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -100%, 0);
    }
}

@-webkit-keyframes footTranslateIn {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes footTranslateIn {
    0% {
        transform: translate3d(0, 100%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes footTranslateOut {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 100%, 0);
    }
}
@keyframes footTranslateOut {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 100%, 0);
    }
}

@-webkit-keyframes slidingLeftIn {
    0% {
        -webkit-transform: translate3d(50%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes slidingLeftIn {
    0% {
        transform: translate3d(50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes slidingLeftOut {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
    }
}
@keyframes slidingLeftOut {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@-webkit-keyframes slidingRightIn {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@keyframes slidingRightIn {
    0% {
        transform: translate3d(-50%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@-webkit-keyframes slidingRightOut {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(50%, 0, 0);
    }
}
@keyframes slidingRightOut {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(50%, 0, 0);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    8.33333333% {
        -webkit-transform: rotate(30deg);
    }
    16.66666667% {
        -webkit-transform: rotate(60deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    33.33333333% {
        -webkit-transform: rotate(120deg);
    }
    41.66666667% {
        -webkit-transform: rotate(150deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    58.33333333% {
        -webkit-transform: rotate(210deg);
    }
    66.66666667% {
        -webkit-transform: rotate(240deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    83.33333333% {
        -webkit-transform: rotate(300deg);
    }
    91.66666667% {
        -webkit-transform: rotate(330deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    8.33333333% {
        transform: rotate(30deg);
    }
    16.66666667% {
        transform: rotate(60deg);
    }
    25% {
        transform: rotate(90deg);
    }
    33.33333333% {
        transform: rotate(120deg);
    }
    41.66666667% {
        transform: rotate(150deg);
    }
    50% {
        transform: rotate(180deg);
    }
    58.33333333% {
        transform: rotate(210deg);
    }
    66.66666667% {
        transform: rotate(240deg);
    }
    75% {
        transform: rotate(270deg);
    }
    83.33333333% {
        transform: rotate(300deg);
    }
    91.66666667% {
        transform: rotate(330deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*图标*/
[class^='icon-']{
    display: inline-block;
    vertical-align: middle;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    font-style: normal;
    position: relative;
}
.icon-back-blue{
    width: 12px;
    height: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff'/></svg>");
}
.icon-menu-blue{
    width: 21px;
    height: 13px;
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>");
}
